.container-nav {
    padding: 0 16%;

    .toc {
        border-width: 0;
        right: 52px;

        ul > li > ul > li {
            line-height: 28px;
            list-style: none;
            border-radius: 8px;
            margin: 6px 0;
            // border-style: double;
            // border: 1px dashed $gray-white-900;
            box-shadow: 1px 1px 3px $gray-200;
            box-sizing: border-box;
            overflow: hidden;
            // transition: .2s all linear;

            width: 160px;
            white-space: nowrap;

            em {
                color: #666;
            }

            a {
                display: block;
                padding: 4px 8px;
                transition: 0.1s padding linear;
                color: #666;
				background: $white;

                &:hover {
                    padding-left: 28px;
                    background: $gray-white-500;

                    em {
                        opacity: 0;
                    }
                }
            }
        }
    }

    .freq {
        display: flex;
        flex-wrap: wrap;
        margin: 16px 0;
        a {
            position: relative;
            flex-shrink: 0;
            display: block;
            box-sizing: border-box;

            background: $gray-100;
            // border: 1px solid #f00000;
            // background : linear-gradient(45deg, #dd669966, #eedbdb66 50%, #8cc6d166);
            border-radius: 8px;
            width: 169px;
            height: 100px;
            margin: 4px 8px 4px 0;
            padding: 4px 8px;
            text-align: center;
            line-height: 92px;
            white-space: nowrap;
            overflow: hidden;

            &:hover {
                overflow-x: auto;
            }

            &:nth-child(4n + 0) {
                margin-right: 0;
            }

            .color-ball {
                position: absolute;
                top: 0;
                left: 16px;
                width: 16px;
                height: 16px;
                border-radius: 0 0 50% 50%;
            }
        }
    }

    .recentf {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        background: $gray-100;
        border-radius: 10px;
        padding: 16px;

        .desc {
            font-size: 0.12rem;
            padding: 8px;
        }

        .rec-post .rec-post-item {
            a {
                font-size: 0.14rem;
                display: inline-block;
                background: $gray-white-600;
                margin: 4px;
                padding: 4px 8px;
                border-radius: 4px;
            }
        }
    }

    .content-nav {
        h3 {
            text-align: right;
            font-size: 0.12rem;

            padding-top: 0;
            padding-bottom: 6px;
            color: #6669;
            &::before {
                content: '◺ '; // 『』◝◟◜◞◸◹◺◿ˇˆ
            }
            &::after {
                content: ' ◝';
            }
        }

        table {
            // width: 100%;

            thead {
                display: none;
            }

            tbody,
            tr,
            td {
                border-width: 0;
				a {
					background: $white;
				}
            }

            tr:nth-child(odd) {
                a {
                    background: $gray-100;
                }
            }

            td {
                width: 20%;
                transition: 0.1s padding linear;
                padding: 0;

                a {
                    display: inline-block;
                    box-sizing: border-box;
                    // width: 100%;
                    width: 136px;
                    border: 1px solid $gray-white-900;
                    padding: 4px 6px;
                    // border-radius: 1px 5px 1px 5px;
                    border-radius: 5px;
                    transition: 0.1s padding linear;
                    white-space: nowrap;
                    overflow: hidden;

                    &:hover {
                        padding-left: 16px;
                        // background: $gray-white-500;
                    }
                }
            }
        }

        ul {
            padding: 4px;
            overflow: hidden;
            white-space: nowrap;

            &:hover {
                overflow: auto;
            }

            li {
                list-style-type: none;
                transition: 0.3s padding linear;
                border-radius: 1px 5px 1px 5px;
                padding-left: 4px;

                &::before {
                    content: '➣ ';
                }
                &:hover {
                    padding-left: 16px;
                }

                a {
                    display: inline-block;
                    width: 100%;
                    padding: 6px 0;
                }

                &:nth-child(even) {
                    background: $gray-100;
                }
            }
        }
    }
}
